<template>
  <!-- 查看消息对话框 -->
  <el-dialog
      :visible.sync="dialogVisible"
      :before-close="handleClose"
      :fullscreen="dialogFull"
      width="40%">
    <template slot="title">
      <div class="dialog_slot_title">
        <span class="slot_title"> {{ "通知消息" }} </span>
        <i :class="['slot_icon', dialogFull ? 'iconfont icon-quxiaoquanping_o' : 'iconfont icon-quanping_o']" @click="dialogFull? dialogFull=false: dialogFull=true" />
      </div>
    </template>
    <slot>
      <!-- <p>弹框自定义的内容</p> -->
    </slot>
  </el-dialog>
</template>

<script>
export default {
  name: 'msgDialog',
  data() {
    return {
      dialogFull: false
    }
  },
  props: {
    dialogTitle: {
      type: String,
      default: '标题'
    },
    visible: {
      type: Boolean,
      default: false
    },
    popupWidth: {
      type: String,
      default: '550px'
    }
  },
  computed: {
     dialogVisible: {
      get () {
        return this.visible
      },
      set (val) {
        // 当visible改变的时候，触发父组件的 updateVisible方法，在该方法中更改传入子组件的 centerDialogVisible的值
        this.$emit('updateVisible', val)
      }
    }
  },
  methods: {
    Cancel () {
      this.$emit('resetPopupData')
    },
    Save () {
      this.$emit('submitPopupData')
    },
    handleClose () {
      this.$emit('handleClose')
    }
  }
}
</script>

<style lang="scss" scoped>
.msg_info{
  .title {
    margin-bottom: 8px;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
  }
  .info {
    font-size: 14px;
    color: rgba(0, 0, 0, 0.45);
  }
}
</style>